<template>
  <div class="menu">
      <div class="search">
        <van-search v-model="value" placeholder="请输入商品" shape="round"
        @search="search"/>
      </div>
      <div class="all">
      <div class="side-menu" >
          <div v-for="(item,index) in TypeData" :key="index"
          @click="addactive(index,item.type)"
          :class="{active:index==ins}"
          >{{item.typeDesc}}</div>
      </div>
      <div class="content">
          <div class="list" >
            <div class="pro-item" v-for="(item, index) in productData" 
            :key="index" @click="add(item.pid)">
                <Product :pro="item" />
            </div>
          </div>
          </div>
      </div>
      </div>
</template>

<script>
import Product from '../components/Product'

export default {
  name: 'Menu',
  data() {  
    return {
      value: '',
      // 下标
      ins:0,

      // 商品类型的数据
      TypeData:[],

      // 商品的数据
      productData: [],
    }
  },
  methods: {
    // 切换分类
    addactive(index,type){
        if(this.ins === index){
            return
        }
        this.ins = index;
        this.getProductByType(type)
    },
    // 点进商品详情
    add(item){
        this.$router.push({name:"Goods",query:{item}})
    },
    getTypeData(){
        this.axios({
            method:"GET",
            url:'/type',
        }).then(res => {
            if(res.data.code === 400){
                // 添加热卖商品类型
                res.data.result.unshift({type: 'isHot', typeDesc: '热卖推荐'});

                this.TypeData = res.data.result

                // 根据商品的类型来获取到商品的数据
                this.getProductByType(res.data.result[this.ins].type)
            }
            
        }).catch(err => {
            
        })
    },
    getProductByType(type){
        //获取缓存数据
        let cacheData = localStorage.getItem('cacheProduct');
        // 

        cacheData = cacheData ? JSON.parse(cacheData) : {};

        //判断缓存是否过期
        //获取当前时间
        let currentTime = new Date().getTime();
        if (cacheData.expires && currentTime - cacheData.expires < 10 * 60 * 1000) {
        //当前类型的商品数据是否存在
        if (cacheData[type]) {
          //如果存在，则在缓存获取
          
          this.productData = cacheData[type];
          return
        }
        } else {
          //如果缓存过期, 将缓存数据清空
          cacheData = {};
        }
        let key = '';
        let value = '';
        if(type === 'isHot'){
            key = type;
            value = 1;
        }else{
            key = 'type';
            value = type;
        }

        // 发送请求
        this.axios({
        method: 'GET',
        url: '/typeProducts',
        params: {
          key,
          value
        }
        }).then(res => {
            
            if (res.data.code === 500) {
                this.productData = res.data.result;
                //首次缓存数据时，记录缓存时间
                if (!cacheData.expires) {
                //假设缓存数据有效期为1分钟
                cacheData.expires = new Date().getTime();
                }
                cacheData[type] = res.data.result;
                localStorage.setItem('cacheProduct', JSON.stringify(cacheData));
            }
        }).catch(err => {
        
        })
    },
    // 搜索商品
    search(){
      if(this.value === ""){
        return
      }
        this.$router.push({name:"Search",query:this.value})
    },

  },
  components:{
    Product
  },
  created(){
    this.getTypeData()
  }
}
</script>

<style lang="less" scoped>

.search{
   position: sticky;
   top: 0;
}
.all{
    display: flex;
    position: fixed;
    top: 54px;
    bottom: 50px;
    left: 0;
    right: 0;
}
.side-menu{
    width: 80px;
    height: 100%;
    background-color: rgb(245,245,245);
    overflow-y: auto;
    font-size: 14px;
    div{
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .active{
        background-color: #fff;
    }
    }
.content{
    width: calc(~"100% - 80px");
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}
.pro-item{
    margin-bottom: 10px;
}
 
</style>